<script setup>
import { onMounted, ref, getCurrentInstance, onBeforeMount } from "vue"
import IndentState from "./IndentState.vue"
// const hotel = ref([
//   {
//     name:"HOTELNAME",
//   },
  // {
  // name:"HOTELNAME"
  // },{
  //   name:"HOTELNAME",
  // },{
  //   name:"HOTELNAME",
  // },
// ])
// const roomType = ref([
//   {
//     type:"VIP",
//     bedType:"BIGED",
//     breakfast:1,
//     capacity:100,
//
//   },
  // {
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // },{
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // },{
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // }
// ])
// const indentBatchVOList = ref([
//   {
//     indentBatch: [
//       {
//         id:1,
//         commentId:2,
//         userId:3,
//         batchId:4,
//         roomTypeId:5,
//         description:"des1",
//         amount:6,
//         checkInTime:new Date(),
//         checkOutTime:new Date(),
//         indentBatchGenerationTime:new Date(),
//         indentState:"CANCELED",
//         hotelId:7,
//       },
//       {
//         id:1,
//         commentId:2,
//         userId:3,
//         batchId:4,
//         roomTypeId:5,
//         description:"des1",
//         amount:6,
//         checkInTime:new Date(),
//         checkOutTime:new Date(),
//         indentBatchGenerationTime:new Date(),
//         indentState:"CANCELED",
//         hotelId:7,
//       }
//     ],
//     totalAmount: 100.1,
//
//   },
  // {
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },{
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },{
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },
// ])
const indentBatchVOList=ref([])
const hotel=ref([])
const roomType=ref([])

const { proxy } = getCurrentInstance()


  //OrderCard Data need user id from outside
  //OrderCard Data below
  //
  // console.log("STILLINVIEW")
  // console.log(props.userId)
  proxy.$http
      .get("/api/indent/userbatch?userId=" +1)
      .then((res) => {

        indentBatchVOList.value = res.data.data

        console.log("INDENTBATCHHERE")
        console.log(indentBatchVOList.value)

        indentBatchVOList.value.forEach((indentBatchVO) => {
          proxy.$http
              .get("/api/hotel?id=" + indentBatchVO.indentBatch[0].hotelId)
              .then((res) => {
                hotel.value.push(res.data.data)
                // console.log("HOTELHERE")
                // console.log(hotel.value)
              })
        })

        indentBatchVOList.value.forEach((indentBatchVO) => {
          proxy.$http
              .get("/api/roomType/" + indentBatchVO.indentBatch[0].roomtypeId)
              .then((res) => {
                roomType.value.push(res.data.data)
                // console.log("ROOMTYPEHERE")
                // console.log(roomType.value)
              })
        })
      })

  // console.log(indentBatchVO.indentBatch[0].hotelId)

// OrderCard Data Above



// const props = defineProps({
//   indentBatchVOList:{
//     type:Array,
//     default:()=>[]
//   },
//   hotel:{
//     type:Array,
//     default:()=>[]
//   },
//   roomType:{
//     type:Array,
//     default:()=>[]
//   },
// })
const props = defineProps({
  userId: {
    type: Number,
    default: 1,
  },
})
const first=ref(true)
const indentBatchVOListCache = ref([{}])
const waitload=()=>{
  // if(first){
  //   console.log("HERE")
    setTimeout(loadIndentBatchVO,5000)
    //   first.value=false
    // }else{
    //   setTimeout(loadIndentBatchVO,1000)
    // }


}
const loadIndentBatchVO = () => {
  // console.log( hotel)
  // console.log( roomType)
  // console.log(indentBatchVOList.value)
  if (indentBatchVOListCache.value.length < indentBatchVOList.value.length) {
    indentBatchVOListCache.value.push(
        indentBatchVOList.value[indentBatchVOListCache.value.length]
    )
  }
  // console.log(indentBatchVOListCache.value)
}
const activeOrder = ref(0)

// const getHotelById = (id,index)=>{
//
//   proxy.$http.get(
//       '/api/hotel?id='+id
//   ).then(res=>{
//     hotel.value.push(res.data.data)
//     console.log("hotel"+index)
//     console.log( hotel.value[index])
//     console.log( res.data.data)
//   })
//   return hotel.value[index]
//
// }
// const getRoomTypeById = (id,index)=>{
//
//   proxy.$http.get(
//       '/api/roomType/'+id
//   ).then(res=>{
//     roomType.value.push(res.data.data)
//     console.log("ROOMTYPE")
//     console.log( roomType.value[index])
//     console.log( res.data.data)
//   })
//   return roomType.value[index]
//
// }
const timeFormat = (intime) => {
  // console.log(intime)
  var mystime = new Date(intime)

  var addstime =
      mystime.getFullYear() +
      "-" +
      fullNum(Number(mystime.getMonth()) + 1) +
      "-" +
      fullNum(mystime.getDate()) +
      " " +
      fullNum(mystime.getHours()) +
      ":" +
      fullNum(mystime.getMinutes()) +
      ":" +
      fullNum(mystime.getSeconds())
  return addstime
}
const fullNum = (obj) => {
  if (Number(obj) < 10) {
    return "0" + obj
  } else {
    return obj
  }
}

const hasBreakfast = (b) => {
  if (b == 1) return "含早餐"
  else return "不含早餐"
}
const mymymy = () => {
  // console.log( hotel)
  // console.log( roomType)
  // console.log( indentBatchVOList)
}
</script>

<template>
  <!--    <div><el-button @click="printit">dododo</el-button></div>-->
  <div>

    <ul v-infinite-scroll="waitload" class="infinite-list">
      <el-collapse
          v-model="activeOrder"
          v-for="(item, index) in indentBatchVOListCache"
      >
        <el-collapse-item :name="index">
          <template #title>
            <span>{{ hotel[index].name }}</span>
            <span width="10rem"></span>
            <span>{{ roomType[index].type }}</span>
            <span>{{
                timeFormat(item.indentBatch[0].indentBatchGenerationTime)
              }}</span>
            <span class="price">￥ {{ item.totalAmount }}</span>
            <IndentState
                :indentState="item.indentBatch[0].indentState"
                :fontSize="10"
            />
          </template>
          <div>
            <div id="orderForm">
              <div class="air-column">
                <el-descriptions :title="hotel[index].name" :column="4">
                  <el-descriptions-item label="房间类型">{{
                      roomType[index].type
                    }}</el-descriptions-item>
                  <el-descriptions-item label="可住人数"
                  >{{ roomType[index].capacity }}人</el-descriptions-item
                  >
                  <el-descriptions-item label="床型">{{
                      roomType[index].bedType
                    }}</el-descriptions-item>
                  <el-descriptions-item label="早餐">
                    <el-tag size="small">{{
                        hasBreakfast(roomType[index].breakfast)
                      }}</el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <div class="air-column">
                <el-descriptions :title="'预订信息'" :column="4">
                  <el-descriptions-item label="入住时间"
                  ><el-date-picker
                      class="input-with-select"
                      v-model="item.indentBatch[0].checkInTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      disabled="true"
                  >
                  </el-date-picker>
                  </el-descriptions-item>

                  <el-descriptions-item label="退房时间">
                    <el-date-picker
                        class="input-with-select"
                        v-model="item.indentBatch[0].checkOutTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        disabled="true"
                    >
                    </el-date-picker>
                  </el-descriptions-item>

                  <el-descriptions-item label="房间数量"
                  ><el-input-number
                      class="input-with-select"
                      v-model="item.indentBatch.length"
                      @change="handleChange"
                      :min="1"
                      :max="10"
                      disabled="true"
                  ></el-input-number>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </ul>
  </div>
</template>
<style>
.price {
  font-size: 28px;
  color: orange;
}
</style>
